<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick" :tab-position="tabPosition">
    <el-tab-pane label="情况说明" name="situationDescribe">
      <situationDescribe ref="situationDescribeRef" v-if="activeName === 'situationDescribe'" />
    </el-tab-pane>
    <el-tab-pane label="质量问题情况" name="qualityproblem">
      <qualityproblem ref="qualityproblemRef" v-if="activeName === 'qualityproblem'" />
    </el-tab-pane>
    <el-tab-pane label="主体完成指标" name="mainCompletion">
      <mainCompletion ref="mainCompletionRef" v-if="activeName === 'mainCompletion'" />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { TabsPaneContext, TabsInstance } from 'element-plus';
  import qualityproblem from './qualitywrite/qualityproblem.vue';
  import situationDescribe from './qualitywrite/situationDescribe.vue';
  import mainCompletion from './qualitywrite/mainCompletion.vue';


  const tabPosition = ref<TabsInstance['tabPosition']>('left');
  const activeName = ref('situationDescribe');
  const qualityproblemRef = ref<InstanceType<typeof qualityproblem>>();
  const situationDescribeRef = ref<InstanceType<typeof situationDescribe>>();
  const mainCompletionRef=ref<InstanceType<typeof mainCompletion>>();


  const handleTabClick = (tab: TabsPaneContext) => {};

  defineExpose({
    situationDescribe,
  });

  onMounted(() => {
    // GraphBarLine.updateChart();
  });
</script>

<style></style>
